<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Heart Animation</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }
        
        canvas {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        
        .text-container {
            position: relative;
            z-index: 2;
            text-align: center;
        }
        
        .love-text {
            font-size: 5rem;
            font-weight: bold;
            color: #add8e6; /* Light blue */
            text-shadow: 0 0 10px #add8e6, 0 0 20px #add8e6;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.1);
                opacity: 0.8;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <canvas id="heartCanvas"></canvas>
    <div class="text-container">
        <div class="love-text">I LOVE U</div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const canvas = document.getElementById('heartCanvas');
            const ctx = canvas.getContext('2d');
            
            // Set canvas size to window size
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            // Resize canvas when window is resized
            window.addEventListener('resize', function() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            });
            
            // Heart class
            class Heart {
                constructor() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.size = Math.random() * 20 + 10;
                    this.speedX = Math.random() * 2 - 1;
                    this.speedY = Math.random() * 2 - 1;
                    this.opacity = Math.random() * 0.5 + 0.5;
                    this.color = `rgba(255, ${Math.floor(Math.random() * 100)}, ${Math.floor(Math.random() * 150)}, ${this.opacity})`;
                    this.pulseSpeed = Math.random() * 0.05 + 0.01;
                    this.pulseDirection = 1;
                    this.rotation = Math.random() * Math.PI * 2;
                    this.rotationSpeed = (Math.random() - 0.5) * 0.05;
                }
                
                update() {
                    this.x += this.speedX;
                    this.y += this.speedY;
                    this.rotation += this.rotationSpeed;
                    
                    // Bounce off edges
                    if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
                    if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
                    
                    // Pulse effect
                    this.opacity += this.pulseSpeed * this.pulseDirection;
                    if (this.opacity > 1) {
                        this.opacity = 1;
                        this.pulseDirection = -1;
                    } else if (this.opacity < 0.5) {
                        this.opacity = 0.5;
                        this.pulseDirection = 1;
                    }
                    
                    this.color = `rgba(255, ${Math.floor(Math.random() * 100)}, ${Math.floor(Math.random() * 150)}, ${this.opacity})`;
                }
                
                draw() {
                    ctx.save();
                    ctx.translate(this.x, this.y);
                    ctx.rotate(this.rotation);
                    ctx.fillStyle = this.color;
                    ctx.shadowBlur = 15;
                    ctx.shadowColor = this.color;
                    
                    // Draw heart shape
                    ctx.beginPath();
                    ctx.moveTo(0, -this.size / 2);
                    ctx.bezierCurveTo(
                        this.size / 2, -this.size,
                        this.size, -this.size / 2,
                        0, this.size / 2
                    );
                    ctx.bezierCurveTo(
                        -this.size, -this.size / 2,
                        -this.size / 2, -this.size,
                        0, -this.size / 2
                    );
                    ctx.closePath();
                    ctx.fill();
                    ctx.restore();
                }
            }
            
            // Create hearts
            const hearts = [];
            const heartCount = Math.floor(window.innerWidth * window.innerHeight / 10000);
            
            for (let i = 0; i < heartCount; i++) {
                hearts.push(new Heart());
            }
            
            // Animation loop
            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                hearts.forEach(heart => {
                    heart.update();
                    heart.draw();
                });
                
                requestAnimationFrame(animate);
            }
            
            animate();
        });
    </script>
</body>
</html>